<template>
  <div class="project-manager">

    <el-tabs v-model="activeName">
      <el-tab-pane label="项目列表" name="first">
        <div class="project-add">
          <addProject ref="addProject" v-on:getProject="getProject"></addProject>
        </div>
        <div>
          <el-row :gutter="24">
            <el-col :span="6" v-for="(item,index) in ProjectList.list" :key="index">
              <div class="grid-content bg-purple">
                <div class="box" @click="setProjectId(item.id,item.name)">
                  <router-link :to="{  name:'接口管理', params: {project_id: item.id}}">
                    <li v-if="item.id %5 =='0'" class="box1">
                      <i class="el-icon-s-finance inter-icon"></i>
                    </li>
                    <li v-if="item.id %5 =='1'" class="box1 box2">
                      <i class="el-icon-star-on inter-icon"></i>
                    </li>
                    <li v-if="item.id %5 =='2'" class="box1 box3">
                      <i class="el-icon-s-management inter-icon"></i>
                    </li>
                    <li v-if="item.id %5 =='3'" class="box1 box4">
                      <i class="el-icon-s-shop inter-icon"></i>
                    </li>
                    <li v-if="item.id %5 =='4'" class="box1 box5">
                      <i class="el-icon-s-promotion inter-icon"></i>
                    </li>
                    <!--<router-link :to="{  path:`/interface/${item.id}/ProjectDesc`, params: {project_id: item.id}}"><h4 class="ui-title">{{item.projectName}}</h4></router-link>-->
                    <h1 class="ui-title">{{item.name}}</h1>
                  </router-link>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

      </el-tab-pane>
      <el-tab-pane label="项目描述" name="second">项目描述</el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import { getProject } from '@/api/project'
import addProject from './addProject'
export default {
  data () {
    return {
      activeName: 'first',
      ProjectList: {
        list: []
      }
    }
  },
  methods: {
    //获取项目
    getProject () {
      const params = {}
      getProject(params).then(resq => {
        if (resq.code == 200) {
          this.ProjectList.list = resq.data
        } else {
          this.$message.error('获取项目失败！');

        }

      })
    },

    setProjectId (projectId, projectName) {
      this.$store.commit('SET_PROJECTID', projectId)
      console.log(this.$store.state.projectId)

      this.$store.commit('SET_PROJECTNAME', projectName)


      console.log(this.$store.state.projectName)



    }
  },
  mounted () {
    this.getProject()
  },

  components: {
    addProject
  }

}
</script>

<style scoped>
.project-manager {
  background-color: white;
  height: 100%;
  margin-top: 2px;
}

.project-add {
  height: 45px;
  background-color: #e9eaec;
  margin: 15px;
}

.project-manager .box1 {
  display: inline-block;
  width: 120px;
  height: 120px;
  /*margin: 35px 55px;*/
  border: 2px solid #f3f3f3;
  text-align: center;
  line-height: 200px;
  font-weight: bold;
  font-size: 24px;
  background: #de8787;
  border-radius: 50%;
}

.project-manager .box2 {
  background: #20a8d8;
}

.project-manager .box3 {
  background: darkseagreen;
}

.project-manager .box4 {
  background: #e09913;
}
.project-manager .box5 {
  background: #ae7dda;
}

.project-manager .box {
  display: inline-block;
  width: 220px;
  height: 140px;
  margin: 30px 50px;
  text-align: center;
}

.project-manager .ui-title {
  margin-bottom: 20px;
  text-align: center;
  font-size: 17.5px;
  color: #3c3b3b;
  font-weight: 400;
}

.project-manager .inter-font {
  font-size: 17px;
  padding-left: 20px;
  padding-right: 20px;
}
.project-manager .inter-icon {
  font-size: 50px;
  color: #495060;
}
</style>